<template>
	<view class="setting">
		<uni-mdnav title="设置"></uni-mdnav>
		<scroll-view class="scrollView" scroll-x="true" :scroll-with-animation="true" enable-flex="true"
			:scroll-into-view="`sub${scrollId}`">
			<view :class="scrollId==index?'scrollItem font16 bold activeScroll':'scrollItem font16'" :id="`sub${index}`"
				v-for="(item,index) in scrollCategory" :key="index" @click.stop="clickScrollItem(item,index)">{{item.title}}
			</view>
		</scroll-view>
		<view class="bg">
			<image :src="bgUrl" mode="widthFix" class="bgPic"></image>
			<view class="info">
				<view class="avatar">
					<image
						:src="avatarUrl?avatarUrl:'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"
						mode="widthFix" class=""></image>
					<view class="flex alignCenter" @click="changeAva">
						<!-- <image src="@/static/image/icons/pic.png" mode="widthFix" @click="changeAva"></image> -->
						<uni-icons class="camera" color="#fff" type="camera" size="35" @click="changeAva"></uni-icons>
					</view>
				</view>
				<view class="">
					<radio-group class="flex alignCenter sexBox" @change="radioChange">
						<label class="flex alignCenter sexLabel" v-for="(item, index) in subCategory" :key="item.value">
							<view>
								<radio style="transform:scale(0.7)" color="#F7DD5E" :value="item.value" :checked="item.value == sex" />
							</view>
							<view class="font16">{{item.pickerTitle}}</view>
						</label>
					</radio-group>
				</view>
				<!-- <view class="noWidthBtn font14 changeBgBtn" @click="changeBg">更换背景</view> -->
			</view>
		</view>
		<view class="modules">
			<!-- <view class="commonTitle bold">账号</view> -->
			<view class="font14 modulesMain" v-if="scrollId==0">
				<uni-mdlist :listData="moduleArr.account" @clickItem="changeInfo"></uni-mdlist>
			</view>

			<!-- <view class="commonTitle bold">身份信息</view> -->
			<view class="font14 modulesMain" v-if="scrollId==1">
				<uni-mdlist :listData="moduleArr.identity" @clickItem="changeInfo"></uni-mdlist>
			</view>
			<!-- <view class="commonTitle bold">其他信息</view>
			<view class="font14 modulesMain">
				<uni-mdlist :listData="moduleArr.other" @clickItem="changeInfo"></uni-mdlist>
			</view> -->
			<!-- <view class="commonTitle bold">协议</view> -->
			<view class="font14 modulesMain" v-if="scrollId==2">
				<uni-mdlist :listData="moduleArr.other" @clickItem="changeInfo"></uni-mdlist>
				<uni-mdlist :listData="moduleArr.agreement" @clickItem="changeInfo"></uni-mdlist>
			</view>
		</view>
		<view class="logout">
			<view class="font16 logoutBtn" @click="logout">退出登录</view>
			<view class="font12 colorccc" @click="delAccount">注销账号</view>
		</view>
		<!-- 选择性别 -->
		<uni-singlepicker :pickerData="subCategory" v-if="showPicker" :showPicker="showPicker" @cancel="cancelPicker"
			@surePicker="surePicker"></uni-singlepicker>
	</view>
</template>

<script>
	import {
		uploadFile,
		chooseImg
	} from "@/utils/common.js"
	import {
		editMyInfo,
		getUserInfo
	} from "@/api/mine.js"
	import {
		delAccount
	} from "@/api/index.js"
	export default {
		data() {
			return {
				scrollId: '0',
				scrollCategory: [{
					title: '基本设置'
				}, {
					title: '身份信息'
				}, {
					title: '其他设置'
				}],
				bgUrl: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/kwkd/resources/personal/defaultBg.jpg',
				avatarUrl: '',
				moduleArr: {
					account: [{
							title: '昵称',
							val: ''
						}
						// ,{
						// 	title:'性别',
						// 	val:''
						// }
						, {
							title: '密码',
							val: ''
						}, {
							title: '简介',
							val: ''
						}
					],
					identity: [{
						title: '教育',
						val: ''
					}, {
						title: '职业',
						val: ''
					}],
					other: [],
					agreement: [{
						title: '隐私协议',
						val: ''
					}, {
						title: '用户协议',
						val: ''
					}]
				},
				changePicType: '',
				subCategory: [{
						pickerTitle: '男',
						value: '0'
					}, {
						pickerTitle: '女',
						value: '1'
					}
					// ,{
					// 	pickerTitle:'未知',
					// 	value:'2'
					// },
				],
				sex: '0',
				showPicker: false,
				userInfo: ''
			};
		},
		onShow() {
			if (uni.getStorageSync('cropUrl')) {
				let path = [uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((uploadSucc) => {
					if (this.changePicType == 'bg') {
						//TO DO
						this.bgUrl = uploadSucc.url
						return
					} else {
						editMyInfo({
							createUserAvatar: uploadSucc.url
						}).then((res) => {
							if (res.code == 100000) {
								this.avatarUrl = uploadSucc.url
							}
						})
						return
					}
				})
			}
			this.getUser()
		},
		onUnload() {
			uni.removeStorageSync('cropUrl')
		},

		onLoad() {
			uni.removeStorageSync('cropUrl')
		},
		methods: {
			clickScrollItem(item, idx) {
				this.scrollId = idx
			},
			// 获取用户信息
			getUser() {
				getUserInfo({
					userId: uni.getStorageSync('userId')
				}).then((res) => {
					if (res.code == 100000) {
						this.userInfo = res.data
						this.avatarUrl = res.data.avatar
						this.sex = res.data.sex
						this.moduleArr.account[0].val = this.userInfo.nickName ? this.userInfo.nickName : ''
						// this.moduleArr.account[1].val=this.userInfo.sex==0?'男':(this.userInfo.sex==1?'女':'未知')
						this.moduleArr.account[2].val = this.userInfo.introduction ? this.userInfo.introduction : ''
					}
				})
			},
			// 改变背景
			changeBg() {
				this.changePicType = 'bg'
				chooseImg(1).then((res) => {
					var path = res;
					uni.navigateTo({
						url: '/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + path[0] + '&ratio=4 / 3'
					})
				})
			},
			// 改变头像
			changeAva() {
				this.changePicType = 'avatar'
				chooseImg(1).then((res) => {
					let path = res;
					uni.navigateTo({
						url: '/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + path[0]
					})
				})
			},
			// 改变性别
			radioChange(e) {
				console.log('性别', e)
				this.sex = e.detail.value
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				editMyInfo({
					sex: this.sex
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						if (!item) {
							this.moduleArr.account[1].val = this.subCategory[0].pickerTitle
						} else {
							this.moduleArr.account[1].val = item.pickerTitle
						}
						this.showPicker = false
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			},
			// 操作信息
			changeInfo(item) {
				console.log('点击', item)
				if (item.title == '昵称') {
					uni.navigateTo({
						url: '/settingPages/pages/nickname/nickname?name=' + this.moduleArr.account[0].val
					})
					return
				} else if (item.title == '性别') {
					this.showPicker = true
					return
				} else if (item.title == '密码') {
					uni.navigateTo({
						url: '/pages/login/forgetPass/forgetPass?from=setting'
					})
					return
				} else if (item.title == '简介') {
					uni.navigateTo({
						url: '/settingPages/pages/intro/intro?intro=' + this.moduleArr.account[2].val
					})
					return
				} else if (item.title == '教育') {
					uni.navigateTo({
						url: '/settingPages/pages/education/eduCardList/eduCardList'
					})
					return
				} else if (item.title == '职业') {
					uni.navigateTo({
						url: '/settingPages/pages/job/jobCardList/jobCardList'
					})
					return
				} else if (item.title == 'qq群') {
					uni.navigateTo({
						url: '/pages/mine/group/group?activeTab=3'
					})
					return
				} else if (item.title == '隐私协议') {
					uni.navigateTo({
						url: '/pages/service/service?type=personal'
					})
					return
				} else if (item.title == '用户协议') {
					uni.navigateTo({
						url: '/pages/service/service?type=user'
					})
					return
				}
			},
			//取消分区选择
			cancelPicker() {
				this.showPicker = false
			},
			// 选择分区的确定事件
			surePicker(item) {
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				let sex = item ? item.value : this.subCategory[0].value
				editMyInfo({
					sex: sex
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						if (!item) {
							this.moduleArr.account[1].val = this.subCategory[0].pickerTitle
						} else {
							this.moduleArr.account[1].val = item.pickerTitle
						}
						this.showPicker = false
					}
				}).catch((err) => {
					uni.hideLoading()
				})

			},
			logout() {
				let mineProgramSys = null;
				if (uni.getStorageSync('mineProgramSys')) {
					mineProgramSys = uni.getStorageSync('mineProgramSys');
				}
				uni.clearStorageSync()
				// 在退出登录后仍然保留获取到的手机信息,手机品牌
				uni.setStorageSync('mineProgramSys', mineProgramSys);
				uni.setStorageSync('systemInfo', uni.getSystemInfoSync())
				uni.setStorageSync('brand', uni.getDeviceInfo().deviceBrand)
				// 控制ios隐私弹窗是否会再出现（退出登录，隐私政策不会再出现）
				if (uni.getSystemInfoSync().platform == "ios") {
					uni.setStorageSync('canShowIos', true)
				}
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			// 注销账号
			delAccount() {
				uni.showModal({
					title: '提示',
					content: '注销账号后账号以及相关数据将全部删除,不可恢复。是否确定注销账号？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							//TO DO
							delAccount().then((res) => {
								if (res.code == 100000) {
									uni.clearStorageSync()
									uni.setStorageSync('systemInfo', uni.getSystemInfoSync())
									uni.setStorageSync('brand', uni.getDeviceInfo().deviceBrand)
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: $pageBgColor;
	}
</style>
<style lang="scss" scoped>
	// 自定义导航栏
	::v-deep .uni-navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}

	::v-deep .uni-navbar__content {
		background-color: transparent !important;
		border: none;
	}

	::v-deep .uni-navbar__header {
		background-color: transparent !important;
	}

	.setting {
		padding: 88rpx 0 0;
		box-sizing: border-box;

		.scrollView {
			/* #ifdef MP || APP-PLUS */
			margin: 80rpx 0 0;
			/* #endif */
			white-space: nowrap;
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-top: 1px solid $bordercolor;

			::v-deep .uni-scroll-view {
				overflow: inherit !important;
			}
		}

		.scrollItem {
			display: inline-block;
			margin: 0 70rpx 0 0;
			text-align: center;
			// position:relative;
		}

		.activeScroll::after {
			content: '';
			display: block;
			// position:absolute;
			height: 8rpx;
			width: 100%;
			// left:0;
			// bottom: 0;
			margin-top: 5rpx;
			background: $colorMain;
			border-radius: 20rpx;
			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .15);
		}
	}

	.bg {
		position: relative;
		height: 270rpx;
		overflow: hidden;

		.bgPic {
			width: 100%;
			height: 100%;
			display: block;
		}

		.info {
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			text-align: center;

			// background: linear-gradient(to top,rgba(0,0,0,.5),transparent);
			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				// margin: 0 0 0 260rpx;  //原型上是这样
				margin: 0 auto;
				border: 8rpx solid #fff;
				box-sizing: border-box;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: block;
					margin: 0 auto 50rpx;
				}

				&>view {
					position: absolute;
					width: 100%;
					height: 100%;
					text-align: center;
					z-index: 10;
					left: 0;
					top: 0;
					line-height: 160rpx;
					background: rgba(0, 0, 0, .3);
					border-radius: 50%;
				}

				.camera {
					margin: 0 auto;
				}
			}

			.sexBox {
				// padding:0 0 0 200rpx; //原型上
				padding: 0 25%;
				box-sizing: border-box;

				::v-deep .sexLabel {
					// margin:0 100rpx 0 0;//原型上
					margin: 0 auto;
				}
			}

			.changeBgBtn {
				position: absolute;
				right: 160rpx;
				top: 90rpx;
				border: 1px solid $colorMain;
				background: $colorMainOper;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 5rpx;
			}
		}
	}

	.modules {
		// padding: 0 0 30rpx;
		box-sizing: border-box;

		.commonTitle {
			margin: 30rpx 0 20rpx;
		}

		.modulesMain {
			background: #F8F9FC;
			// padding: 0 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.moduleItem {
				border-bottom: 1px solid $bordercolor;
				padding: 30rpx 0;
			}

			.moduleItem:last-child {
				border: none;
			}
		}
	}

	.logout {
		text-align: center;
		margin: 20rpx 0 0;

		.logoutBtn {
			padding: 20rpx 0;
			background: #fff;
			border-radius: 8rpx;
			box-sizing: border-box;
			margin: 0 0 30rpx;
		}
	}
</style>